```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Filesystem MCP Server | 安全可控的文件系统操作接口</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .feature-icon {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .code-block {
            background-color: #2d3748;
            color: #e2e8f0;
            border-radius: 0.5rem;
            position: relative;
        }
        .code-copy {
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            color: #a0aec0;
            cursor: pointer;
            transition: color 0.2s;
        }
        .code-copy:hover {
            color: #e2e8f0;
        }
        .mermaid {
            background-color: white;
            padding: 1rem;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 sm:px-6 lg:px-8">
        <div class="max-w-5xl mx-auto text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-6">Filesystem MCP Server</h1>
            <p class="text-xl md:text-2xl mb-8 opacity-90">基于 TypeScript 的安全、可控文件系统操作接口</p>
            <div class="flex justify-center space-x-4">
                <a href="https://github.com/cyanheads/filesystem-mcp-server/" target="_blank" class="bg-white text-indigo-700 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium transition duration-300 transform hover:scale-105 inline-flex items-center">
                    <i class="fab fa-github mr-2"></i> GitHub 项目
                </a>
                <a href="#getting-started" class="bg-indigo-800 hover:bg-indigo-900 text-white px-6 py-3 rounded-lg font-medium transition duration-300 transform hover:scale-105 inline-flex items-center">
                    <i class="fas fa-rocket mr-2"></i> 快速开始
                </a>
            </div>
        </div>
    </section>

    <!-- Problem Statement -->
    <section class="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto">
        <div class="bg-white rounded-xl shadow-md overflow-hidden">
            <div class="p-8">
                <div class="flex items-center mb-6">
                    <div class="flex items-center justify-center w-12 h-12 rounded-full bg-indigo-100 text-indigo-700 mr-4">
                        <i class="fas fa-exclamation-triangle text-xl"></i>
                    </div>
                    <h2 class="text-2xl font-bold">它能解决什么问题？</h2>
                </div>
                <p class="text-gray-700 mb-6">开发者与 AI 代理在操作本地文件系统时常遇到以下痛点：跨平台 API 不一致、未授权文件访问的安全风险、动态工作流中的复杂路径管理，以及手动操作文件的低效与易错性。</p>
                <p class="text-gray-700 mb-6">许多现有工具缺乏标准化接口或安全保障，难以无缝集成到 AI 驱动的流程中。<span class="font-bold text-indigo-700">Filesystem MCP Server 正是为解决这些问题而生</span>，提供安全、标准化的文件操作接口，确保高效且安全的文件管理。</p>
            </div>
        </div>
    </section>

    <!-- Core Features -->
    <section class="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto">
        <h2 class="text-3xl font-bold text-center mb-12">核心功能概述</h2>
        <div class="grid md:grid-cols-2 gap-8">
            <div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 card-hover">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-file-alt feature-icon text-3xl mr-3"></i>
                        <h3 class="text-xl font-bold">文件读写</h3>
                    </div>
                    <p class="text-gray-700">支持以 UTF-8 格式读取文件内容，写入或覆盖文件，支持绝对和相对路径，灵活适应多种场景。</p>
                </div>
            </div>
            <div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 card-hover">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-folder feature-icon text-3xl mr-3"></i>
                        <h3 class="text-xl font-bold">目录管理</h3>
                    </div>
                    <p class="text-gray-700">提供列出、创建、移动、复制或删除目录的功能，简化文件组织任务。</p>
                </div>
            </div>
            <div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 card-hover">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-edit feature-icon text-3xl mr-3"></i>
                        <h3 class="text-xl font-bold">精准文件更新</h3>
                    </div>
                    <p class="text-gray-700">支持基于文本或正则表达式的查找替换操作，便于高效编辑文件内容。</p>
                </div>
            </div>
            <div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 card-hover">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-map-marked-alt feature-icon text-3xl mr-3"></i>
                        <h3 class="text-xl font-bold">会话路径管理</h3>
                    </div>
                    <p class="text-gray-700">每个会话可设置默认工作目录，简化相对路径处理。</p>
                </div>
            </div>
            <div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 card-hover md:col-span-2">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-shield-alt feature-icon text-3xl mr-3"></i>
                        <h3 class="text-xl font-bold">安全机制</h3>
                    </div>
                    <p class="text-gray-700">包括路径清理、HTTP 的 JWT 认证及可选的目录限制，防止未授权访问。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases -->
    <section class="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto bg-white">
        <h2 class="text-3xl font-bold text-center mb-12">使用场景</h2>
        <div class="space-y-8">
            <div class="flex flex-col md:flex-row gap-6 items-start">
                <div class="bg-indigo-100 text-indigo-800 rounded-full w-16 h-16 flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-code text-2xl"></i>
                </div>
                <div>
                    <h3 class="text-xl font-bold mb-3">AI 辅助代码编辑</h3>
                    <p class="text-gray-700 mb-4">AI 助手（如 Claude）通过该服务器读取项目源文件，执行正则表达式重构（例如更新过时的函数名），并安全写入更改。</p>
                    <p class="text-indigo-700 italic">你能如何利用这一功能优化你的代码重构流程？</p>
                </div>
            </div>
            <div class="flex flex-col md:flex-row gap-6 items-start">
                <div class="bg-purple-100 text-purple-800 rounded-full w-16 h-16 flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-file-word text-2xl"></i>
                </div>
                <div>
                    <h3 class="text-xl font-bold mb-3">自动化文档更新</h3>
                    <p class="text-gray-700">开发者可通过服务器的查找替换功能，批量更新多个仓库的 README 文件（如版本号或链接），确保一致性。</p>
                </div>
            </div>
            <div class="flex flex-col md:flex-row gap-6 items-start">
                <div class="bg-blue-100 text-blue-800 rounded-full w-16 h-16 flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-project-diagram text-2xl"></i>
                </div>
                <div>
                    <h3 class="text-xl font-bold mb-3">数据管道集成</h3>
                    <p class="text-gray-700">AI 驱动的数据管道可读取输入文件、处理数据并将结果写入指定目录，借助会话路径管理实现无缝操作。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Advantages -->
    <section class="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto bg-gray-50">
        <h2 class="text-3xl font-bold text-center mb-12">优势与特色</h2>
        <div class="grid md:grid-cols-2 gap-8">
            <div class="bg-white p-6 rounded-xl shadow-md">
                <div class="flex items-start mb-4">
                    <div class="bg-green-100 text-green-800 rounded-full w-10 h-10 flex items-center justify-center flex-shrink-0 mr-4">
                        <i class="fas fa-check"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold">MCP 标准兼容</h3>
                        <p class="text-gray-700 mt-2">无缝适配支持 MCP 的客户端（如 Claude Desktop 或 IDE 扩展），优于非标准化脚本。</p>
                    </div>
                </div>
            </div>
            <div class="bg-white p-6 rounded-xl shadow-md">
                <div class="flex items-start mb-4">
                    <div class="bg-red-100 text-red-800 rounded-full w-10 h-10 flex items-center justify-center flex-shrink-0 mr-4">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold">强大的安全性</h3>
                        <p class="text-gray-700 mt-2">通过路径清理和可选的 FS_BASE_DIRECTORY 限制，防止目录遍历攻击，弥补许多工具的安全漏洞。</p>
                    </div>
                </div>
            </div>
            <div class="bg-white p-6 rounded-xl shadow-md">
                <div class="flex items-start mb-4">
                    <div class="bg-blue-100 text-blue-800 rounded-full w-10 h-10 flex items-center justify-center flex-shrink-0 mr-4">
                        <i class="fab fa-node-js"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold">TypeScript 驱动</h3>
                        <p class="text-gray-700 mt-2">类型安全和模块化设计确保生产环境的高可靠性。</p>
                    </div>
                </div>
            </div>
            <div class="bg-white p-6 rounded-xl shadow-md">
                <div class="flex items-start mb-4">
                    <div class="bg-purple-100 text-purple-800 rounded-full w-10 h-10 flex items-center justify-center flex-shrink-0 mr-4">
                        <i class="fas fa-random"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold">双模式支持</h3>
                        <p class="text-gray-700 mt-2">支持 STDIO 和 HTTP 传输模式，适应本地或网络化的 AI 交互需求。</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mt-8">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-exclamation-triangle text-yellow-500"></i>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-yellow-800">局限性</h3>
                    <div class="mt-2 text-sm text-yellow-700">
                        <p>需 Node.js 环境及对 MCP 配置有一定了解，初学者可能需学习成本。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Diagram -->
    <section class="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto">
        <h2 class="text-3xl font-bold text-center mb-12">系统架构概览</h2>
        <div class="mermaid">
            graph TD
                A[AI Agent] -->|MCP 请求| B[Filesystem MCP Server]
                B --> C{传输模式}
                C -->|STDIO| D[本地进程]
                C -->|HTTP| E[网络服务]
                B --> F[安全层]
                F --> G[路径清理]
                F --> H[JWT 认证]
                F --> I[目录限制]
                B --> J[文件系统操作]
                J --> K[文件读写]
                J --> L[目录管理]
                J --> M[查找替换]
                J --> N[路径管理]
        </div>
    </section>

    <!-- Getting Started -->
    <section id="getting-started" class="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto bg-white">
        <h2 class="text-3xl font-bold text-center mb-12">上手指南</h2>
        <div class="space-y-8">
            <div class="flex flex-col md:flex-row gap-6">
                <div class="bg-indigo-100 text-indigo-800 rounded-full w-16 h-16 flex items-center justify-center flex-shrink-0">
                    <span class="text-2xl font-bold">1</span>
                </div>
                <div>
                    <h3 class="text-xl font-bold mb-3">克隆仓库</h3>
                    <div class="code-block p-4 mt-2">
                        <button class="code-copy" title="Copy to clipboard">
                            <i class="far fa-copy"></i>
                        </button>
                        <code>git clone https://github.com/cyanheads/filesystem-mcp-server.git</code>
                        <br>
                        <code>cd filesystem-mcp-server</code>
                    </div>
                </div>
            </div>
            <div class="flex flex-col md:flex-row gap-6">
                <div class="bg-indigo-100 text-indigo-800 rounded-full w-16 h-16 flex items-center justify-center flex-shrink-0">
                    <span class="text-2xl font-bold">2</span>
                </div>
                <div>
                    <h3 class="text-xl font-bold mb-3">安装依赖</h3>
                    <div class="code-block p-4 mt-2">
                        <button class="code-copy" title="Copy to clipboard">
                            <i class="far fa-copy"></i>
                        </button>
                        <code>npm install</code>
                    </div>
                </div>
            </div>
            <div class="flex flex-col md:flex-row gap-6">
                <div class="bg-indigo-100 text-indigo-800 rounded-full w-16 h-16 flex items-center justify-center flex-shrink-0">
                    <span class="text-2xl font-bold">3</span>
                </div>
                <div>
                    <h3 class="text-xl font-bold mb-3">配置环境</h3>
                    <p class="text-gray-700 mb-4">创建 <code>.env</code> 文件，设置如 <code>MCP_LOG_LEVEL=debug</code>、<code>MCP_TRANSPORT_TYPE=stdio</code>（或 <code>http</code>）、<code>FS_BASE_DIRECTORY=./data_sandbox</code> 等参数以确保安全。</p>
                </div>
            </div>
            <div class="flex flex-col md:flex-row gap-6">
                <div class="bg-indigo-100 text-indigo-800 rounded-full w-16 h-16 flex items-center justify-center flex-shrink-0">
                    <span class="text-2xl font-bold">4</span>
                </div>
                <div>
                    <h3 class="text-xl font-bold mb-3">构建项目</h3>
                    <div class="code-block p-4 mt-2">
                        <button class="code-copy" title="Copy to clipboard">
                            <i class="far fa-copy"></i>
                        </button>
                        <code>npm run build</code>
                    </div>
                </div>
            </div>
            <div class="flex flex-col md:flex-row gap-6">
                <div class="bg-indigo-100 text-indigo-800 rounded-full w-16 h-16 flex items-center justify-center flex-shrink-0">
                    <span class="text-2xl font-bold">5</span>
                </div>
                <div>
                    <h3 class="text-xl font-bold mb-3">启动服务器</h3>
                    <div class="code-block p-4 mt-2">
                        <button class="code-copy" title="Copy to clipboard">
                            <i class="far fa-copy"></i>
                        </button>
                        <code>node build/index.js</code>
                    </div>
                    <p class="text-gray-700 mt-2">若使用 HTTP 模式，请确保网络配置正确。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Cursor Installation -->
    <section class="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto bg-gray-50">
        <h2 class="text-3xl font-bold text-center mb-12">Cursor 安装配置</h2>
        <div class="bg-white rounded-xl shadow-md overflow-hidden">
            <div class="p-6">
                <div class="code-block p-4">
                    <button class="code-copy" title="Copy to clipboard">
                        <i class="far fa-copy"></i>
                    </button>
                    <pre><code>{
  "mcpServers": {
    "filesystem-mcp-server": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@smithery/cli@latest",
        "run",
        "@cyanheads/filesystem-mcp-server",
        "--key",
        "d6774556-bbea-4b7e-8929-628f565a2752",
        "--profile",
        "defensive-scorpion-IciuND"
      ]
    }
  }
}</code></pre>
                </div>
            </div>
        </div>
    </section>

    <!-- Final CTA -->
    <section class="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto text-center">
        <h2 class="text-3xl font-bold mb-6">开始使用 Filesystem MCP Server</h2>
        <p class="text-xl text-gray-700 mb-8">为你的 AI 代理提供安全、可控的文件系统操作接口</p>
        <a href="https://github.com/cyanheads/filesystem-mcp-server/" target="_blank" class="bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-4 rounded-lg font-medium transition duration-300 transform hover:scale-105 inline-flex items-center">
            <i class="fab fa-github mr-2"></i> 访问 GitHub 仓库
        </a>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });

        // Copy to clipboard functionality
        document.querySelectorAll('.code-copy').forEach(button => {
            button.addEventListener('click', () => {
                const codeBlock = button.parentElement;
                const code = codeBlock.querySelector('code').textContent;
                
                navigator.clipboard.writeText(code).then(() => {
                    button.innerHTML = '<i class="fas fa-check"></i>';
                    setTimeout(() => {
                        button.innerHTML = '<i class="far fa-copy"></i>';
                    }, 2000);
                });
            });
        });
    </script>
</body>
</html>
```